<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../store/auth'
import { userLogin } from '../../api/user'
import { doctorLogin } from '../../api/doctor'
import { adminLogin } from '../../api/admin'

const router = useRouter()
const auth = useAuthStore()

const activeTab = ref('user')

const userForm = ref({ phone: '', password: '' })
const doctorForm = ref({ phone: '', password: '' })
const adminForm = ref({ username: '', password: '' })

const loading = ref(false)

const submit = async () => {
  loading.value = true
  try {
    if (activeTab.value === 'user') {
      // 兼容后端可能使用 username 的情况，统一传递 phone 与 username
      const payload = { phone: userForm.value.phone, username: userForm.value.phone, password: userForm.value.password }
      const data = await userLogin(payload)
      auth.setRoleAndUser('user', data)
      router.push('/user/home')
    } else if (activeTab.value === 'doctor') {
      const payload = { phone: doctorForm.value.phone, password: doctorForm.value.password }
      const data = await doctorLogin(payload)
      auth.setRoleAndUser('doctor', data)
      router.push('/doctor/home')
    } else if (activeTab.value === 'admin') {
      const data = await adminLogin(adminForm.value)
      auth.setRoleAndUser('admin', data)
      router.push('/admin/home')
    }
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="login-wrap">
    <div class="box">
      <h2 class="title">校医体检管理系统</h2>
      <el-tabs v-model="activeTab" class="tabs">
        <el-tab-pane label="用户登录" name="user">
          <el-form :model="userForm" label-width="80px">
            <el-form-item label="手机号">
              <el-input v-model="userForm.phone" placeholder="手机号" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.password" type="password" placeholder="密码" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="医生登录" name="doctor">
          <el-form :model="doctorForm" label-width="80px">
            <el-form-item label="手机号">
              <el-input v-model="doctorForm.phone" placeholder="手机号" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="doctorForm.password" type="password" placeholder="密码" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="管理员登录" name="admin">
          <el-form :model="adminForm" label-width="80px">
            <el-form-item label="账号">
              <el-input v-model="adminForm.username" placeholder="用户名" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="adminForm.password" type="password" placeholder="密码" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" :loading="loading" @click="submit" style="width: 100%;">登录</el-button>
      <div class="tips">
        没有账号？<el-link type="primary" @click="router.push('/register')">去注册</el-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-wrap { display:flex; align-items:center; justify-content:center; height:100vh; background: #f5f7fa; }
.box { width: 420px; padding: 24px; background: #fff; border: 1px solid #eee; border-radius: 8px; }
.title { text-align:center; margin-bottom: 16px; }
.tabs { margin-bottom: 16px; }
.tips { margin-top: 12px; text-align:center; color: var(--text-secondary); }
</style>